<template>
    <div class="app-container">
      <div class="mapDiv" v-loading="loading">
        <!--地图-->
        <DpaIndexMap v-if="completeRefreshData==true"
            @getMap="getMap"
            :resultDialogType="result.resultDialogType"
            :resultDataList="result.resultDataList"
            :drawXzqhGeom="countParam.geomText"
            :taskGoem="taskGoem"
            :resultLegendList="result.resultLegendList"
        ></DpaIndexMap>
        <!--工具条控件-->
        <ControlToolBar v-if="completeRefreshData==true"
            :map="map" :pageType="pageType" :mapDrawType="mapDrawType" :intensityType="intensityType"
            :dtcvId="dtcvId" :taskGoem="taskGoem"
            @showPattenAnalysis="showPattenAnalysis"
            @showEvaluateResultSelect="showEvaluateResultSelect"
            @showImgcreate="showImgcreate"
            @returnSetPage="returnSetPage"
            @getAllDrawGeom="getAllDrawGeom"
            @returnLastPage="returnLastPage"
            @getLegendHtml="getLegendHtml"
            @mapLoading="mapLoading"
        ></ControlToolBar>
        <!--超图图层显示-->
        <SuperMapLayer v-if="completeRefreshData==true"
            :map="map" :layerDataTypeList="layerDataTypeList"
            :resetClearAllBool="resetClearAllBool" :geomText="countParam.geomText"
        ></SuperMapLayer>
        <!-- 规律分析按钮面板 -->
        <div v-show="showPattenAnalysisBool" class="new-pattenAnalysisDiv">
          <!-- 弹窗面板 -->
          <div class="new-popover">
            <div class="new-triangle"></div>
            <!-- 规律分析按钮 -->
            <div class="showPattenAnalysisDiv">
              <div class="showPattenAnalysisDiv-div1">
                <div @click="polygonDraw" class="new-pattenAnalysisDiv-button" :class="{ 'new-div-selected': polygonDrawBool==true }">
                  <img title="多边形" src="@/assets/map/image/newImage/icon-polygon.png"><br/><span>多边形</span>
                </div>
                <div @click="circleDraw" class="new-pattenAnalysisDiv-button" :class="{ 'new-div-selected': circleDrawBool==true }">
                  <img title="圆形" src="@/assets/map/image/newImage/icon-circle.png"><br/><span>圆形</span>
                </div>
              </div>
              <div @click="xzqhSelect" class="new-pattenAnalysisDiv-button" :class="{ 'new-div-selected': openArea==true }">
                <img title="行政区划选择" src="@/assets/map/image/newImage/icon-district.png"><br/><span>行政区划</span>
              </div>
            </div>
          </div>
        </div>
        <!--抗震能力分布烈度面板-->
        <div v-if="showSeismicCapacityDistributionBool" class="earthquakeLevelAngleRadioSelectDiv" style="width:359px;">
        <div style="width: 30%;">
            <span style="font-size: 14px;font-weight: bold;">抗震设防烈度：</span>
        </div>
        <el-radio-group v-model="intensitySelect" @change="radioIntensitySelect" style="float: right;width: 60%;margin-top: -25px;">
            <el-radio v-for="item in intensityLegendData" :key="item.value" :label="item.value" :value="item.value">
            {{item.name}}
            </el-radio>
        </el-radio-group>
        </div>
        <!-- 行政区域选择 -->
        <!-- <XzqhSelect :open="openArea" :selectDistrict="selectDistrict" @close="closeXzqhSelect"
                    @getSelectXzqhGeom="getSelectXzqhGeom" @getSelectDistrict="getSelectDistrict">
        </XzqhSelect> -->
        <!--版本选择面板-->
        <!-- <VersionDialog v-if="openDialog"
                       :open="openDialog" :type="dialogType"
                       @closeDialog="closeDialog" @selectVersionData="selectVersionData"
        ></VersionDialog> -->
        <!--设置选择数据面板-->
        <div class="new-settingDiv" v-show="showSettingDivBool">
          <div class="new-settingDiv-div2">
            <span class="new-p">
                <div>抗震设防烈度</div>
                <el-radio-group v-model="checkIntensity">
                    <el-radio :label="7">7度</el-radio>
                    <el-radio :label="8">8度</el-radio>
                    <el-radio :label="9">9度</el-radio>
                </el-radio-group>
            </span>
          </div>
          <!-- <div class="new-settingDiv-div3">
            <el-button @click="handleCount" type="primary">计算</el-button>
            <el-button @click="showSettingDivBool=false" type="primary">关闭</el-button>
          </div> -->
        </div>
        <!--图层图例-->
        <div v-if="showHideLegendDivBool" class="layerMap-legend">
          <!--滚动条-->
          <el-scrollbar max-height="500px">
            <p>图例</p>
            <div v-for="item in layerShowHideArray" :key="item.code" v-show="item.show" v-html="item.legendHtml">
            </div>
          </el-scrollbar>
        </div>
        <!--计算结果展示窗口-->
        <ResultDialog v-if="showResultDialogBool" :open="showResultDialogBool" :result="result"
                      @closeResultDialog="closeResultDialog"
        ></ResultDialog>
      </div>
      <!--生成图件-->
        <PrintMap v-if="showImgcreateBool"
                  :open="showImgcreateBool" 
                  :taskId="result.taskId"
                  :mapLevel1Category="result.mapLevel1Category" :mapLevel2Category="result.mapLevel2Category"
                  :legendSetList="result.legendSetList" :tempLayersSetList="result.tempLayersSetList"
                  @closeImgDialog="closeImgDialog"
        ></PrintMap>
    </div>
  </template>
  
  <script setup>
  //地图
  import DpaIndexMap from '@/map/weakSoilAssess/rtAnalysisAssess/indexMap.vue';
  import PrintMap from '@/map/slideAssess/distributionPatternAnalysis/printMap.vue';
  import ControlToolBar from '@/map/components/controlToolBar/rtAnalysisAssess/index.vue';
  import SuperMapLayer from '@/map/components/superMapLayer/index.vue';
  import XzqhSelect from '@/map/weakSoilAssess/rtAnalysisAssess/xzqhSelect.vue';
  import VersionDialog from '@/map/weakSoilAssess/rtAnalysisAssess/versionDialog.vue';
  import ResultDialog from '@/map/weakSoilAssess/rtAnalysisAssess/resultDialog.vue';
  import {getAreaTree,getDistrictBoundary} from "@/api/taskmanage/sceneExame"
  import { detailTask } from "@/api/taskmanage/task";
  import { getProvinces, getYear, getDistrict } from "@/utils/group.js";
  import { iServerHttp } from "@/map/projMap.js"
  import { getJcEarthquakeDamageSurvey,count1,count2,count3,count4,count5,count6,count7,getDataByType } from "@/api/slideAssess/distributionPatternAnalysis/indexMap";
  
  const { proxy } = getCurrentInstance();
  const router = useRouter();
  const props = defineProps(['dataType']);
  const loading = ref(false);
  const pageType = ref("分布规律分析页面");
  const showSettingDivBool = ref(false);//是否显示选择数据设置面板
  //抗震能力分布--烈度选择
  const intensitySelect = ref("7");
  //与地震烈度的关系
  const dzxValue = ref("");//历史地震等震线临时数据
  const dzxList = ref([]);//历史地震等震线下拉框数据列表
  const checkIntensity = ref(""); //抗震设防烈度
  //行政区划选择面板
  const openArea = ref(false);
  //数据选择面板
  const openDialog = ref(false);
  const showSeismicCapacityDistributionBool = ref(false)// 打开烈度面板
  //数据选择类型
  const dialogType = ref("");
  //是否显示计算结果弹窗
  const showResultDialogBool = ref(false);
  //计算结果弹窗类型
  const resultDialogType = ref("");
  const resetClearAllBool = ref(false);//是否清空全部超图图层
  
  const data = reactive({
    countParam:{//计算参数
      param1: "",//中国地震综合等震线、活断层数据、...、地层岩性数据等数据选择版本号、历史地震等震线ID
      param2: "",//滑坡现场调查数据选择版本号
      param3: "",//滑坡遥感影像解译数据选择版本号
      tab1:"1",//1中国地震综合等震线 2历史地震等震线
      geomText:"",//空间数据
    },
    result:{
      resultDialogType:"",//计算结果弹窗类型
      resultDataList:[],//计算结果数据列表
      resultLegendList:[],//计算结果图例列表
      dspId:"",
      type:"",
      taskId: '',//任务ID
      mapLevel1Category:"7",//一级图件分类
      mapLevel2Category:"17",//二级图件分类
      legendSetList:[],//图层（临时图层）url列表--用于显示图例
      tempLayersSetList:[],//图层（临时图层）url列表--用于显示图层
      completeBool:false,//是否完成计算
      level2DataType:"",//数据类别二级code
      level3DataType:"",//数据类别三级code
      isYw:false,//是否为业务系统数据，true业务系统，false基础数据系统
    },
    //图层数据类别code和版本号显示列表
    layerDataTypeList:[{
      //中国地震综合等震线、活断层数据、...、地层岩性数据等数据
      level2DataType:"",//数据类别二级code
      level3DataType:"",//数据类别三级code
      versionCode:null,//版本号："全部"则展示整个图层，null无版本号不展示
      show:false,//是否显示
      isYw:false,//是否为业务系统数据，true业务系统，false基础数据系统
    },{
      //滑坡现场调查
      level2DataType:"landslidexc",//数据类别二级code
      level3DataType:"hpxcdc",//数据类别三级code
      versionCode:null,//版本号："全部"则展示整个图层，null无版本号不展示
      show:false,//是否显示
      isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
    },{
      //滑坡遥感影像
      level2DataType:"landslide",//数据类别二级code
      level3DataType:"hpygyx",//数据类别三级code
      versionCode:null,//版本号："全部"则展示整个图层，null无版本号不展示
      show:false,//是否显示
      isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
    }]
  });
  
  let {
    countParam,result,layerDataTypeList
  } = toRefs(data);
const mapLoading = (msg)=>{//地图查询loading
  if(msg!=null){
    proxy.$modal.loading(msg);
  }else{
    proxy.$modal.closeLoading();
  }
}
const layerShowHideArray = ref([]);//图层是否显示数组
const showHideLegendDivBool = ref(false);//是否显示图例
//图例
/*const getLegendHtml = (obj)=>{
  if(obj!=null){
    layerShowHideArray.value = [{
      name: obj.name,
      show: obj.show,
      legendHtml: obj.legendHtml
    }];
    showHideLegendDivBool.value = true;// 打开图例面板
  }
}*/
//图例
const getLegendHtml = (obj)=>{
  console.log("getLegendHtml");
  console.log(obj);
  //图层显示隐藏数组
  let showHideArray = layerShowHideArray.value;
  if(obj!=null){
    for(let i=0;i<showHideArray.length;i++){
      if(showHideArray[i].name==obj.name){
        showHideArray[i].show = obj.show;
        showHideArray[i].legendHtml = obj.legendHtml;//显示图例
        break;
      }
    }
    //是否显示图例
    let bool = false;
    for(let i=0;i<showHideArray.length;i++){
      if(showHideArray[i].show){
        bool = true;
        break;
      }
    }
    showHideLegendDivBool.value = bool;
  }else{//清空图例
    //是否显示图例
    for(let i=0;i<showHideArray.length;i++){
      showHideArray[i].show = false;
    }
    showHideLegendDivBool.value = false;
  }
}
//初始化设置图例数组
function setLayerShowHideArray(){
  layerShowHideArray.value = [
      { name: "钻孔结果", show:false,legendHtml:"" },
      { name: "区域结果", show:false,legendHtml:"" }
  ];
}

//关闭生成图件窗口
const closeImgDialog = (bool)=>{
  showImgcreateBool.value = false;
}
  const returnSetPage = (bool)=>{
    router.push({ path: "/rtAnalysisAssess/indexAssess",
      // query: {taskId: id, taskType:type, pattern:taskPattern, metaTitle: pageName} 
    })
  }
  const rules = reactive({
    taskDistrict: [{
      required: true,
      message: "请选择地区",
      trigger: "change"
    }],
  });
  
  /*地图传参start*/
  const completeRefreshData = ref(false);//防止刷新后地图不显示
  //地图对象
  const map = ref(null);
  const getMap = (obj)=>{
    map.value = obj;
  }
  const showPattenAnalysisBool = ref(false);
  const showPattenAnalysis = (val) =>{
    showPattenAnalysisBool.value = val;
  }
  const showImgcreateBool = ref(false);
  const showImgcreate = (obj) =>{
    result.value.taskId = route.query.taskDataId
    showImgcreateBool.value = obj.bool
    result.value.legendSetList = [
      {
        name: obj.name,
        url: obj.url
      },
      {
        name: 'district_boundary_china@fxfzypg',
        url: iServerHttp() + '/iserver/services/map-fxfzypg/rest/maps/district_boundary_china@fxfzypg'
      }
    ],//图层（临时图层）url列表--用于显示图例
    result.value.tempLayersSetList = [
      {
        name: obj.name,
        url: obj.url
      },
      {
        name: 'district_boundary_china@fxfzypg',
        url: iServerHttp() + '/iserver/services/map-fxfzypg/rest/maps/district_boundary_china@fxfzypg'
      }
    ]//图层（临时图层）url列表--用于显示图层
  }
  const mapDrawType = ref("");//是否开启地图圈选查询类型（StopDraw关闭地图圈选 Polygon多边形绘制 Circle圆形绘制 Clear清空）
  const polygonDrawBool = ref(false);
  const polygonDraw = () =>{
    if(polygonDrawBool.value){
      polygonDrawBool.value = false;
      mapDrawType.value = "StopDraw";
    }else{
      clearResultData("Polygon");
    }
  }
  const circleDrawBool = ref(false);
  const circleDraw = () =>{
    if(circleDrawBool.value){
      circleDrawBool.value = false;
      mapDrawType.value = "StopDraw";
    }else{
      clearResultData("Circle");
    }
  }
  //关闭其他打开的按钮
  const closeSelectButton = () =>{
    if(polygonDrawBool.value){
      polygonDrawBool.value = false;
      mapDrawType.value = "StopDraw";
    }
    if(circleDrawBool.value){
      circleDrawBool.value = false;
      mapDrawType.value = "StopDraw";
    }
    if(openArea.value){
      openArea.value = false;
    }
  }
  
  //是否清空规律分析计算结果
  const clearResultData = (type) =>{
    //判断是否已有数据
    let resultDataList = result.value.resultDataList;//计算结果数据列表
    if(resultDataList && resultDataList.length>0){
      proxy.$modal.confirm('是否清空规律分析计算结果并重新设置规律分析区域？').then(function () {
        resetClearAllBool.value = true;//是否清空全部超图图层
        countParam.value.tab1 = "1";//1中国地震综合等震线 2历史地震等震线
        countParam.value.param1 = "";//参数1的版本号
        countParam.value.param2 = "";//滑坡现场调查数据的版本号
        countParam.value.param3 = "";//滑坡遥感影像解译数据的版本号
        countParam.value.geomText = "";//清空空间数据
        result.value.resultDataList = [];//清空数据
        result.value.completeBool = false;
        //重置图层数据类别code和版本号显示列表
        resetLayerDataTypeList();
        closeSelectButton();
        if(type=="Polygon"){
          polygonDrawBool.value = true;
          mapDrawType.value = "Polygon";
        }else if(type=="Circle"){
          circleDrawBool.value = true;
          mapDrawType.value = "Circle";
        }else if(type=="Xzqh"){
          openArea.value = true;
        }
      });
    }else{
      closeSelectButton();
      if(type=="Polygon"){
        polygonDrawBool.value = true;
        mapDrawType.value = "Polygon";
      }else if(type=="Circle"){
        circleDrawBool.value = true;
        mapDrawType.value = "Circle";
      }else if(type=="Xzqh"){
        openArea.value = true;
      }
    }
  }
  //抗震能力分布--烈度范围
  const intensityLegendData = ref([
    {code:"0",name:"7度",value:"7"},
    {code:"1",name:"8度",value:"8"},
    {code:"2",name:"9度",value:"9"},
  ]);
  //显示隐藏评估结果选择面板
  const showEvaluateResultSelect = (bool)=>{
    if(bool){
      showSeismicCapacityDistributionBool.value = true// 打开烈度面板
      showHideLegendDivBool.value = true// 图例面板
    } else{
      //清空评估结果选择
      showSeismicCapacityDistributionBool.value = false
      showHideLegendDivBool.value = false// 图例面板
    }
  }
  //全部地图绘制空间数据
  const allDrawGeomText = ref("");
  //全部行政区划选择空间数据
  const allXzqhGeomText = ref("");
  //获取全部地图绘制结果
  const getAllDrawGeom = (list) =>{
    //判断是否已有数据
    let resultDataList = result.value.resultDataList;//计算结果数据列表
    if(resultDataList && resultDataList.length>0){
      showSettingDivBool.value = true;//是否显示选择数据设置面板
    }else{
      //关闭其他打开的按钮
      closeSelectButton();
      let geom = "";
      if(list && list.length>0){
        geom = "MULTIPOLYGON(";
        for(let i=0;i<list.length;i++){
          if(i>0){
            geom += ",";
          }
          geom += list[i].split("POLYGON")[1];
        }
        geom += ")";
      }
      console.log("获取全部地图绘制结果");
      console.log(geom);
      if(geom=="MULTIPOLYGON()"){
        geom = "";
      }
      allDrawGeomText.value = geom;//全部地图绘制空间数据
      //设置计算空间数据
      setCountGeomText();
      showSettingDivBool.value = true;//是否显示选择数据设置面板
    }
  }
  const returnLastPage = () => { // 返回评估页面
    // loading.value = true; // 加载遮罩层
    // 关闭当前tab
    console.log(getCurrentInstance());
    // proxy.$tab.closePage(view).then(({ visitedViews }) => {
    //     if (isActive(view)) {
    //     toLastView(visitedViews, view)
    //     }
    // })
  }
  const xzqhSelect = () => { //行政区划选择区域
    if(openArea.value){
      openArea.value = false;
    }else{
      clearResultData("Xzqh");
    }
  }
  //行政区划选择区域
  const selectDistrict = ref("");
  //获取行政区划选择区域
  const getSelectDistrict = (val) => {
    selectDistrict.value = val;//行政区划选择区域
  }
  //获取行政区划选择区域空间数据
  const getSelectXzqhGeom = (list) => {
    let geom = "";
    if(list && list.length>0){
      geom = "MULTIPOLYGON(";
      for(let i=0;i<list.length;i++){
        if(i>0){
          geom += ",";
        }
        if(list[i].indexOf("MULTIPOLYGON (")==0){
          geom += list[i].split("MULTIPOLYGON (")[1].slice(0,-1);
        }
      }
      geom += ")";
    }
    console.log("获取行政区划选择区域空间数据");
    console.log(geom);
    if(geom=="MULTIPOLYGON()"){
      geom = "";
    }
    allXzqhGeomText.value = geom;//全部行政区划选择空间数据
    //设置计算空间数据
    setCountGeomText();
  }
  //设置计算空间数据
  function setCountGeomText(){
    let geom = "";
    let list = [];
    let drawGeomText = allDrawGeomText.value;//全部地图绘制空间数据
    let xzqhGeomText = allXzqhGeomText.value;//全部行政区划选择空间数据
    if(drawGeomText){
      list.push(drawGeomText);
    }
    if(xzqhGeomText){
      list.push(xzqhGeomText);
    }
    if(list && list.length>0){
      geom = "MULTIPOLYGON(";
      for(let i=0;i<list.length;i++){
        if(i>0){
          geom += ",";
        }
        if(list[i].indexOf("MULTIPOLYGON(")==0){
          geom += list[i].split("MULTIPOLYGON(")[1].slice(0,-1);
        }
      }
      geom += ")";
    }
    console.log(list);
    console.log("设置计算空间数据");
    console.log(geom);
    countParam.value.geomText = geom;//设置空间数据
  }
  /*地图传参end*/
  const closeXzqhSelect = (val)=>{
    if(val){
      openArea.value = false;
    }
  }
  
  const closeDialog = (val)=>{
    if(val){
      openDialog.value = false;
    }
  }
  //选择版本数据
  const selectVersionData = (obj)=>{
    if(obj){
      let versionCode = obj.versionCode;
      let type = obj.type;
      if(type=="滑坡现场调查数据"){
        if(countParam.value.param2){
          countParam.value.param2 = "";//清空选择版本号
          //根据参数设置图层数据类别code和版本号显示列表
          setLayerDataTypeListByParams();
          nextTick(() => {
            countParam.value.param2 = versionCode;
            //根据参数设置图层数据类别code和版本号显示列表
            setLayerDataTypeListByParams();
          });
        }else{
          countParam.value.param2 = versionCode;
          //根据参数设置图层数据类别code和版本号显示列表
          setLayerDataTypeListByParams();
        }
      }else if(type=="滑坡遥感影像解译数据"){
        if(countParam.value.param3){
          countParam.value.param3 = "";//清空选择版本号
          //根据参数设置图层数据类别code和版本号显示列表
          setLayerDataTypeListByParams();
          nextTick(() => {
            countParam.value.param3 = versionCode;
            //根据参数设置图层数据类别code和版本号显示列表
            setLayerDataTypeListByParams();
          });
        }else{
          countParam.value.param3 = versionCode;
          //根据参数设置图层数据类别code和版本号显示列表
          setLayerDataTypeListByParams();
        }
      }else{//中国地震综合等震线、活断层数据、...、地层岩性数据等数据
        if(countParam.value.param1){
          countParam.value.param1 = "";//清空选择版本号
          //根据参数设置图层数据类别code和版本号显示列表
          setLayerDataTypeListByParams();
          nextTick(() => {
            countParam.value.param1 = versionCode;
            resetClearAllBool.value = false;//是否清空全部超图图层
            //根据参数设置图层数据类别code和版本号显示列表
            setLayerDataTypeListByParams();
          });
        }else{
          countParam.value.param1 = versionCode;
          resetClearAllBool.value = false;//是否清空全部超图图层
          //根据参数设置图层数据类别code和版本号显示列表
          setLayerDataTypeListByParams();
        }
      }
    }
  }
  
  //校验数据
  function checkCountParam(){
    let bool = true;
    let param1 = countParam.value.param1;
    let param2 = countParam.value.param2;
    let param3 = countParam.value.param3;
    if(param1){
      //已选择版本号
    }else{
      if(props.dataType=="riverSystemRelation"){
        //水系不需要版本号
      }else{
        bool = false;
      }
    }
    if(param2){
      //已选择版本号
    }else{
      if(param3){
        //已选择版本号
      }else{
        bool = false;
      }
    }
    if(bool){
      if(countParam.value.geomText){
        //已地图圈选/行政区划选择区域
      }else{
        bool = false;
        proxy.$modal.msgWarning("请设置规律分析区域");
      }
    }else{
      proxy.$modal.msgWarning("请选择版本");
    }
  
    return bool;
  }
  
  //计算成功
  function countSuccess(){
    proxy.$modal.msgSuccess("计算成功");
    //获取用户上传计算结果保存的参数
    getLastDataByType(props.dataType);
    //开启选择
    mapDrawType.value = "Select";
    result.value.completeBool = true;
  }
  
  //单选切换事件
  const changeRadio = (val)=>{
    if(val=="1"){//中国地震综合等震线
      countParam.value.param1 = "";//清空历史地震等震线ID
    }else if(val=="2"){//历史地震等震线
      countParam.value.param1 = "";//清空选择版本号
    }
    // resetClearAllBool.value = true;//是否清空全部超图图层
    resetClearAllBool.value = false//是否清空全部超图图层
    //根据参数设置图层数据类别code和版本号显示列表
    setLayerDataTypeListByParams();
  }
  
  //切换历史地震等震线下拉框选中数据
  const changeDzxValue = (val)=>{
    if(countParam.value.tab1=="2"){
      countParam.value.param1 = val;//历史地震等震线ID
      resetClearAllBool.value = false//是否清空全部超图图层
      //根据参数设置图层数据类别code和版本号显示列表
      setLayerDataTypeListByParams();
    }
  }

  //抗震设防烈度
  const changeCheck = (val)=>{
    
  }
  
  //获取历史地震等震线列表
  function getDzxList(){
    getJcEarthquakeDamageSurvey().then(response => {
      console.log("获取历史地震等震线列表");
      console.log(response);
      dzxList.value = response.data;
    }).catch(() => {
      // proxy.$modal.msgError("查询失败");
    });
  }
  const intensityType = ref('7')
  function radioIntensitySelect(){
    intensityType.value = intensitySelect.value
  }
  //获取用户上传计算结果保存的参数
  function getLastDataByType(dataType){
    let tab = null;
    if(dataType=="earthquakeIntensityRelation"){
      //与地震烈度的关系
      tab = "1";
      result.value.resultLegendList = [
        {name:"Ⅴ",value:"5",color:"rgba(255,0,0,0.7)"},
        {name:"Ⅵ",value:"6",color:"rgba(255,100,0,0.7)"},
        {name:"Ⅶ",value:"7",color:"rgba(255,255,0,0.7)"},
        {name:"Ⅷ",value:"8",color:"rgba(0,255,0,0.7)"},
        {name:"Ⅸ",value:"9",color:"rgba(0,255,255,0.7)"},
        {name:"Ⅹ",value:"10",color:"rgba(0,0,255,0.7)"},
        {name:"Ⅺ",value:"11",color:"rgba(255,0,255,0.7)"},
        {name:"Ⅻ",value:"12",color:"rgba(255,0,200,0.7)"},
      ];//烈度。5Ⅴ、6 Ⅵ、7 Ⅶ、8 Ⅷ、9 Ⅸ、10 Ⅹ、11 Ⅺ、12 Ⅻ
      result.value.resultDialogType = "与地震烈度的关系";
      //地震综合等震线
      result.value.level2DataType = "dzzhdzx";//数据类别二级code
      result.value.level3DataType = "dzzhdzx1";//数据类别三级code
      result.value.isYw = false;//是否为业务系统数据，true业务系统，false基础数据系统
    }else if(dataType=="seismogenicFaultDistanceRelation"){
      //与距断层距离的关系
      tab = "2";
      result.value.resultLegendList = [
          {name:"0~5",value:"1",color:"rgba(255,0,0,0.7)"},
          {name:"5~10",value:"2",color:"rgba(255,100,0,0.7)"},
          {name:"10~15",value:"3",color:"rgba(255,255,0,0.7)"},
          {name:"15~20",value:"4",color:"rgba(0,255,0,0.7)"},
          {name:"20~25",value:"5",color:"rgba(0,255,255,0.7)"},
          {name:"25~30",value:"6",color:"rgba(0,0,255,0.7)"},
          {name:">30",value:"7",color:"rgba(255,0,255,0.7)"}
      ];//距断层的距离。7,>30;6,25~30;5,20~25;4,15~20;3,10~15;2,5~10;1,0~5
      result.value.resultDialogType = "与距断层距离的关系";
      //断层
      result.value.level2DataType = "hdc";//数据类别二级code
      result.value.level3DataType = "dc";//数据类别三级code
      result.value.isYw = false;//是否为业务系统数据，true业务系统，false基础数据系统
    }else if(dataType=="elevationRelation"){
      //与高程的关系
      tab = "3";
      result.value.resultLegendList = [
        {name:"<0.6",value:"1",color:"rgba(255,0,0,0.7)"},
        {name:"0.6~1.0",value:"2",color:"rgba(255,100,0,0.7)"},
        {name:"1.0~1.5",value:"3",color:"rgba(255,255,0,0.7)"},
        {name:"1.5~2.0",value:"4",color:"rgba(0,255,0,0.7)"},
        {name:"2.0~2.5",value:"5",color:"rgba(0,255,255,0.7)"},
        {name:"2.5~3.0",value:"6",color:"rgba(0,0,255,0.7)"},
        {name:"3.0~3.5",value:"7",color:"rgba(255,0,255,0.7)"},
        {name:">3.5",value:"8",color:"rgba(255,0,200,0.7)"}
      ];//高程。1,<0.6;2,0.6~1;3,1~1.5;4,1.5~2;5,2~2.5;6,2.5~3;7,3~3.5;8,>3.5
      result.value.resultDialogType = "与高程的关系";
      //高程
      result.value.level2DataType = "demgc";//数据类别二级code
      result.value.level3DataType = "demgcsj";//数据类别三级code
      result.value.isYw = false;//是否为业务系统数据，true业务系统，false基础数据系统
    }else if(dataType=="terrainSlopeRelation"){
      //与地形坡度的关系
      tab = "4";
      result.value.resultLegendList = [
        {name:"<15",value:"1",color:"rgba(255,0,0,0.7)"},
        {name:"15~25",value:"2",color:"rgba(255,100,0,0.7)"},
        {name:"25~35",value:"3",color:"rgba(255,255,0,0.7)"},
        {name:"35~45",value:"4",color:"rgba(0,255,0,0.7)"},
        {name:"45~55",value:"5",color:"rgba(0,255,255,0.7)"},
        {name:">55",value:"6",color:"rgba(0,0,255,0.7)"},
      ];//坡度。1,<15;2,15~25;3,25~35;4,35~45;5,45~55;6,>55
      result.value.resultDialogType = "与地形坡度的关系";
      //坡度
      result.value.level2DataType = "";//数据类别二级code
      result.value.level3DataType = "";//数据类别三级code
      result.value.isYw = true;//是否为业务系统数据，true业务系统，false基础数据系统
    }else if(dataType=="slopeAspectRelation"){
      //与坡向的关系
      tab = "5";
      result.value.resultLegendList = [
        {name:"北",value:"1",color:"rgba(255,0,0,0.7)"},
        {name:"北东",value:"2",color:"rgba(255,100,0,0.7)"},
        {name:"东",value:"3",color:"rgba(255,255,0,0.7)"},
        {name:"南东",value:"4",color:"rgba(0,255,0,0.7)"},
        {name:"南",value:"5",color:"rgba(0,255,255,0.7)"},
        {name:"南西",value:"6",color:"rgba(0,0,255,0.7)"},
        {name:"西",value:"7",color:"rgba(255,0,255,0.7)"},
        {name:"北西",value:"8",color:"rgba(255,0,200,0.7)"}
      ];//坡向1,N;2,NE;3,E;4,ES;5,S;6,SW;7,W;8,WN
      result.value.resultDialogType = "与坡向的关系";
      //坡向
      result.value.level2DataType = "";//数据类别二级code
      result.value.level3DataType = "";//数据类别三级code
      result.value.isYw = true;//是否为业务系统数据，true业务系统，false基础数据系统
    }else if(dataType=="riverSystemRelation"){
      //与水系的关系
      tab = "6";
      result.value.resultLegendList = [
        {name:"0~500",value:"1",color:"rgba(255,0,0,0.7)"},
        {name:"500~1000",value:"2",color:"rgba(255,100,0,0.7)"},
        {name:"1000~1500",value:"3",color:"rgba(255,255,0,0.7)"},
        {name:"1500~2000",value:"4",color:"rgba(0,255,0,0.7)"},
        {name:">2000",value:"5",color:"rgba(0,255,255,0.7)"}
      ];//距水系距离。1,0~500;2,500~1000;3,1000~1500;4,1500~2000;5,>2000
      result.value.resultDialogType = "与水系的关系";
      //水系线
      result.value.level2DataType = "sx";//数据类别二级code
      result.value.level3DataType = "sxx";//数据类别三级code
      result.value.isYw = false;//是否为业务系统数据，true业务系统，false基础数据系统
    }else if(dataType=="stratumLithologyRelation"){
      //与地层岩性的关系
      tab = "7";
      result.value.resultLegendList = [
        {name:"Q4",value:"1",color:"rgba(255,0,0,0.7)"},
        {name:"Er",value:"2",color:"rgba(255,100,0,0.7)"},
        {name:"T3z",value:"3",color:"rgba(255,255,0,0.7)"},
        {name:"T3zh",value:"4",color:"rgba(0,255,0,0.7)"},
        {name:"T2zg",value:"5",color:"rgba(0,255,255,0.7)"},
        {name:"T1b",value:"6",color:"rgba(0,0,255,0.7)"},
        {name:"Tγo",value:"7",color:"rgba(255,0,255,0.7)"},
        {name:"P2b-d",value:"8",color:"rgba(255,0,200,0.7)"},
        {name:"Psd-d",value:"9",color:"rgba(255,0,150,0.7)"},
        {name:"C2h",value:"10",color:"rgba(200,0,100,0.7)"},
        {name:"Cz-h",value:"11",color:"rgba(200,0,50,0.7)"},
        {name:"D2y",value:"12",color:"rgba(200,0,20,0.7)"}
      ];//地层岩性。1,Q4;2,Er;3,T3z;4,T3zh;5,T2zg;6,T1b;7,Tγo;8,P2b-d;9,Psd-d;10,C2h;11,Cz-h;12,D2y
      result.value.resultDialogType = "与地层岩性的关系";
      //地层岩性
      result.value.level2DataType = "dcyx";//数据类别二级code
      result.value.level3DataType = "dcyx1";//数据类别三级code
      result.value.isYw = false;//是否为业务系统数据，true业务系统，false基础数据系统
    }
    if(tab){
      //查询参数及结果：1、与地震烈度2、与距断层距离3、与高程4、与地形坡度5、与坡向6、与水系7、与地层岩性
      getDataByType(tab).then(response => {
        console.log("获取用户上传计算结果保存的参数");
        console.log(response);
        let responseData = response.data;
        if(responseData){
          let dzzhSlideParam = responseData.dzzhSlideParam;
          if(dzzhSlideParam){
            resetClearAllBool.value = false;//是否清空全部超图图层
            countParam.value.param1 = dzzhSlideParam.param1;//参数1的版本号
            countParam.value.param2 = dzzhSlideParam.param2;//滑坡现场调查数据的版本号
            countParam.value.param3 = dzzhSlideParam.param3;//滑坡遥感影像解译数据的版本号
            countParam.value.tab1 = dzzhSlideParam.tab;//参数1的类型
            countParam.value.geomText = dzzhSlideParam.geom;//空间数据
            result.value.dspId = dzzhSlideParam.id;
            result.value.type = dzzhSlideParam.paramType;//1-7
            //根据参数设置图层数据类别code和版本号显示列表
            setLayerDataTypeListByParams();
          }
          let byDspId = responseData.byDspId;//计算结果数据列表
          if(byDspId!=null && byDspId.length>0){
            result.value.resultDataList = byDspId;
          }
          result.value.completeBool = true;
        }
      }).catch(() => {
        // proxy.$modal.msgError("查询失败");
      });
    }
  }
  
  //重置图层数据类别code和版本号显示列表
  function resetLayerDataTypeList(){
    //获取初始图层数据类别code和版本号显示数组
    let layerDataTypeArray = getInitLayerDataTypeArray();
    layerDataTypeList.value = layerDataTypeArray;
  }
  
  //获取初始图层数据类别code和版本号显示数组
  function getInitLayerDataTypeArray(){
    let versionCode = null;
    if(result.value.level2DataType=="sx"){//水系（无版本）
      versionCode = "全部";
    }
    let layerDataTypeArray = [{
      //中国地震综合等震线、活断层数据、...、地层岩性数据等数据
      level2DataType:result.value.level2DataType,//数据类别二级code
      level3DataType:result.value.level3DataType,//数据类别三级code
      versionCode:versionCode,//版本号："全部"则展示整个图层，null无版本号不展示
      show:false,//是否显示
      isYw:result.value.isYw,//是否为业务系统数据，true业务系统，false基础数据系统
    },{
      //滑坡现场调查
      level2DataType:"landslidexc",//数据类别二级code
      level3DataType:"hpxcdc",//数据类别三级code
      versionCode:null,//版本号："全部"则展示整个图层，null无版本号不展示
      show:false,//是否显示
      isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
    },{
      //滑坡遥感影像
      level2DataType:"landslide",//数据类别二级code
      level3DataType:"hpygyx",//数据类别三级code
      versionCode:null,//版本号："全部"则展示整个图层，null无版本号不展示
      show:false,//是否显示
      isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
    }];
  
    return layerDataTypeArray;
  }
  
  //根据参数设置图层数据类别code和版本号显示列表
  function setLayerDataTypeListByParams(){
    //获取初始图层数据类别code和版本号显示数组
    // let layerDataTypeArray = getInitLayerDataTypeArray();
    let layerDataTypeArray = layerDataTypeList.value;
    if(result.value.level2DataType=="sx") {//水系(无版本)
      layerDataTypeArray[0].level2DataType = result.value.level2DataType;//数据类别二级code
      layerDataTypeArray[0].level3DataType = result.value.level3DataType;//数据类别三级code
      layerDataTypeArray[0].versionCode = "全部";//版本号："全部"则展示整个图层，null无版本号不展示
      layerDataTypeArray[0].show = true;//显示图层
    }else if(countParam.value.param1){
      layerDataTypeArray[0].level2DataType = result.value.level2DataType;//数据类别二级code
      layerDataTypeArray[0].level3DataType = result.value.level3DataType;//数据类别三级code
      layerDataTypeArray[0].versionCode = countParam.value.param1;//参数1的版本号
      layerDataTypeArray[0].show = true;//显示图层
    }else{
      // layerDataTypeArray[0].versionCode = null;//参数1的版本号
      layerDataTypeArray[0].show = false;//移除图层
    }
    if(countParam.value.param2){
      layerDataTypeArray[1].versionCode = countParam.value.param2;//滑坡现场调查数据的版本号
      layerDataTypeArray[1].show = true;//显示图层
    }else{
      // layerDataTypeArray[1].versionCode = null;//滑坡现场调查数据的版本号
      layerDataTypeArray[1].show = false;//移除图层
    }
    if(countParam.value.param3){
      layerDataTypeArray[2].versionCode = countParam.value.param3;//滑坡遥感影像解译数据的版本号
      layerDataTypeArray[2].show = true;//显示图层
    }else{
      // layerDataTypeArray[2].versionCode = null;//滑坡遥感影像解译数据的版本号
      layerDataTypeArray[2].show = false;//移除图层
    }
    layerDataTypeList.value = layerDataTypeArray;
    console.log("layerDataTypeArray");
    console.log(layerDataTypeArray);
  }
  
  //关闭计算结果展示窗口
  const closeResultDialog = (bool)=>{
    showResultDialogBool.value = false;
  }
  
  //获取数据类型一级
  const getDataType = watch(() => props.dataType, value => {// watch函数监听props.dataType
    if(value){
      if(value=="earthquakeIntensityRelation"){//与地震烈度的关系
        //获取历史地震等震线列表
        getDzxList();
      }
      //获取用户上传计算结果保存的参数
      getLastDataByType(value);
    }
  },{immediate:true});
  const taskGoem = ref('')
  //获取任务
  function getTask(){
    detailTask({ dtId: route.query.taskDataId }).then((response) => {
      if(response.data.geom){
        taskGoem.value = response.data.geom
      }
    });
  }
  const route = useRoute();
  const dtcvId = ref('');//模型ID
  const taskId = ref('');//任务ID
  onMounted(() => {
    completeRefreshData.value = true;
    dtcvId.value = route.query.dtcvId;
    taskId.value = route.query.taskDataId;
    setLayerShowHideArray();//初始化设置图例数组
    setTimeout(() => {
      getTask()
    },200)
  })
  </script>
  
  <style scoped lang="scss">
  .mapDiv {
    position:absolute;top:0px;left:0px;width:100%;height:100%;
  }
  .el-radio {
    color: white;
  }
  /*设置选择数据面板*/
  .new-settingDiv {
    position:absolute;
    top:18px;
    right:10px;
    width:400px;
    padding-top: 10px;
    background:rgba(0,27,67,0.7);
    border-radius:4px;color:white;
  }
  .new-settingDiv-div1{
    padding-bottom: 10px;
    border-bottom: 1px dashed white;
  }
  .new-settingDiv .new-p{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size:14px;

    >div {
        margin: 0 20px;
    }
  }
  .new-settingDiv-div3{
    text-align: center;
  }
  :deep(.new-settingDiv .el-radio){
    color:white;
  }
  :deep(.new-settingDiv .el-checkbox){
    color:white;
  }
  :deep(.new-settingDiv .new-p .el-button){
    position:absolute;right:20px;
  }
  :deep(.new-settingDiv .el-select){
    width:208px;
  }
  .new-settingDiv-span {
    float: right;
    line-height: 32px;
    cursor:pointer;
  }
  .new-settingDiv-span:hover {
    cursor:pointer;
  }
  
  /*带三角弹窗*/
  .new-popover {
    position: absolute;
    top:0px;
    left:0px;
    padding:10px;
    background: rgba(0,27,67,0.8);
    color:white;
    z-index:100;
  }
  .new-triangle {
    position: absolute;
    top: 20px;
    left: -19px;
    overflow: hidden;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: dashed solid dashed dashed;
    border-color:transparent rgba(0,27,67,0.8) transparent transparent;
  }
  
  .new-pattenAnalysisDiv {
    position: absolute;top:246px;left:105px;font-size: 14px;
  }
  
  .new-pattenAnalysisDiv-button {
    float: left;
    width: 80px;
    text-align: center;
    padding: 5px;
    cursor:pointer;
  }
  /*规律分析按钮div*/
  .showPattenAnalysisDiv{
  
  }
  .showPattenAnalysisDiv img {
    width:25px;
    border:1px dashed white;
  }
  .showPattenAnalysisDiv-div1 {
    display: inline-block;width:160px;border-bottom: 1px dashed white;padding-bottom: 10px;
  }
  
  .new-div-selected {
    background: rgba(16,124,229,0.5);
    border: 1px solid #707070;
  }
  
  .areaDialog {
    text-align: center;
    .close {
      text-align: right;
      .el-icon {
        color: #606266;
        padding: 20px 0;
        margin-right: 10px;
        right: 0px;
        font-size: 22px;
      }
    }
    width: 320px;
    position: absolute;
    top: 246px;
    left: 288px;
    background: rgba($color: #fff, $alpha: 0.9);
  }
  /*地震影响场|评估结果震级、角度选择面板*/
  .earthquakeLevelAngleRadioSelectDiv {
    position: absolute;
    top: 15px;
    right: 30px;
    width: 369px;
    background-color:rgba(0,45,87,0.8)!important;
    color: white;
    padding: 15px;
    // box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
    border:1px solid #707070;
    border-radius: 4px;
  }
  //图例
.layerMap-legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 50px;
  background: #fff;
  padding: 10px;
  overflow: auto;
  min-width: 200px;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
}
.layerMap-legend p:first-child{
  text-align: center;font-weight: bold;
}
  </style>